import React, { PureComponent } from 'react';
import { Tabs } from 'antd';

import ExtendsComponent from './extendsComponent';
import ExtendsPureComponent from './extendsPureComponent';
import ExtendsPureComponentFunc from './extendsPureComponentFunc';
import UseStateRight from './UseStateRight';

const { TabPane } = Tabs;

class App extends PureComponent {

    state = {
        active: '1'
    }

    onChange = (e) => {
        this.setState({ active: e })
    }

    render() {
        const { active } = this.state;
        return (
            <Tabs onChange={this.onChange}>
                <TabPane tab="继承于Component" key='1'>
                    {active && <ExtendsComponent />}
                </TabPane>
                <TabPane tab="继承于PureComponent" key='2'>
                    {active && <ExtendsPureComponent />}
                </TabPane>
                <TabPane tab="函数定义造成的渲染" key='3'>
                    {active && <ExtendsPureComponentFunc />}
                </TabPane>
                <TabPane tab="生命周期正确使用" key='4'>
                    {active && <UseStateRight />}
                </TabPane>
            </Tabs>
        )
    }
}

export default App;
